<template>
  <div>
 <div style="margin-top:10px;display:flex;justify-content: center;">
   <img v-if="goodForm.Images" :src="baseimg+goodForm.Images" class="avatar">
 </div>
  <div style="margin-top:10px">
     <h2>{{goodForm.Name}}</h2>
    </div>
     <div style="margin-top:10px">
     <h2>{{goodForm.Content}}</h2>
    </div>
    <el-card class="box-card" v-for="(item,index) in goodForm.GoodPropertyKey" :key="index" >
 {{ item.Name }}
 <div>
  
 <!-- <el-button v-for="(kk,index) in item.GoodPropertyValue" :key="index" @click="r(kk.Value)">{{kk.Value}}</el-button> -->
   <el-radio-group size="medium" v-model="pl">
      <el-radio-button :label="kk.Value" v-for="(kk,index) in item.Name=='配料'? item.GoodPropertyValue:'' " :key="index"  ></el-radio-button>
    </el-radio-group>
     <el-radio-group size="medium" v-model="hh">  <el-radio-button :label="kk.Value" v-for="(kk,index) in item.Name=='温度'? item.GoodPropertyValue:'' " :key="index"  ></el-radio-button></el-radio-group>
     <el-radio-group size="medium" v-model="hh1">  <el-radio-button :label="kk.Value" v-for="(kk,index) in item.Name=='糖度'? item.GoodPropertyValue:'' " :key="index"  ></el-radio-button></el-radio-group>
      
</div>
    </el-card>
    <el-card class="box-card"   >
  <span style="font-size:18px">￥{{ goodForm.Price  }}</span>  <div style="display:inline-block;margin-left:200px" > <el-input-number v-model="num" :min="1" :max="50" ></el-input-number></div>
  <div>{{ pl }}  {{ hh}}  {{ hh1 }}</div>
 </el-card>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="op">加入购物车</el-button>
    </div>
  </div>
</template>

<script>
import basepath from '../../plugins/base.js'
import {mapMutations,mapState} from 'vuex'
export default {
  name: 'goodedit',
  data() {
    return {
      
       num: 1,
      hh:'',
      hh1:'',
      pl:'',
      baseimg: '',
      baseapi: '',
      imageUrl:'',
      types: [],
      specs: [],
      goodForm: {
        TID: 2,
        Images: '',
        Name: '冻顶乌龙',
        Content: '冻顶乌龙很好喝',
        Price: 18.00,
        Unit: '杯',
        Use_Property: true,
        Sort: 0,
        On_sale:false,
        GoodPropertyKey: [
          {
            gskid: 1,  //规格 主键表  GoodSpecKey  id
            GoodPropertyValue: [],
            checked: true
          },
          {
            gskid: 2,
            GoodPropertyValue: [],
            checked: true
          },
          {
            gskid: 3,
            GoodPropertyValue: [],
            checked: true
          }
        ]
      }

      ,//表单验证规则
      rules: {
        Name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" },
        ],
        Price: [
          { required: true, message: "请输入价格", trigger: "blur" }
        ],
        Unit: [
          { required: true, message: "请输入单位", trigger: "blur" }
        ],
        Content: [
          { required: true, message: "请输入商品描述", trigger: "blur" }
        ],
        Images: [
          { required: true, message: "请选择图片", trigger: "blur" }
        ]
      },
    }
  },
  model: {
    prop: "dialogFormVisible",
    event: "change",
  },
  props: {
    dialogFormVisible: Boolean,
    editData: Object,
  },
  watch: {
    editData: function (newvalue, oldvalue) {
  /*     console.log('newvalue: ', newvalue); */
      this.goodForm = JSON.parse(JSON.stringify(newvalue));
        this.goodForm.number=1
         this.hh='';
        this.hh1="",
        this.pl=""
    }
  },
  methods: {
   
      ...mapMutations(['addCart']),
      op(){
        this.goodForm.Pl=this.pl+','+this.hh+','+this.hh1
       
         console.log(this.goodForm)
        this.goodForm.number=this.num;
        if(this.pl!=""||this.hh!=""||this.hh1!=""){
          this.goodForm.Sfpl=true
        }else{
           this.goodForm.Sfpl=false
        }
        //this.goodForm.Sfpl=this.hh!=""?true:false;
          this.addCart(this.goodForm);
          
        this.hh='';
        this.hh1="",
        this.pl=""
           //刷新主页面数据
                this.$emit("refresh");
                //关闭弹窗
                this.$emit("change", false);
      }
    //上传成功
  },
  created() {
    this.baseimg = basepath.imgUrl;
    this.baseapi = basepath.apiUrl;
    this.goodForm = JSON.parse(JSON.stringify(this.editData));
   this.goodForm.number=1
    console.log('this.editData: ', this.editData);

  },
  computed:{
    ...mapState(['goodsCart'])
  }
}
</script>

<style scoped>
.pp{
  background-color: antiquewhite;
}
 .box-card {
    width: 470px;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>